<script>
import domUtil from 'wind-dom'
import { eventHub } from '../utils/event'

export default {
  name: 'Popover',
  props: {
    trigger: {
      type: String,
      default: 'click'
    },
    direction: {
      type: String,
      default: 'top'
    },
    extraClass: {
      type: String
    },
    extraTop: {
      type: Number,
      default: 0
    },
    extraLeft: {
      type: Number,
      default: 0
    },
    exactLeft: {
      type: Number
    },
    exactTop: {
      type: Number
    }
  },
  data() {
    return {
      show: false,
      position: {
        top: 0,
        left: 0
      }
    }
  },
  mounted() {
  },
  created() {
    eventHub.$on('list-refresh', this.hidePopoverIfNeeded)
  },
  beforeDestroy() {
    eventHub.$off('list-refresh', this.hidePopoverIfNeeded)
  },
  methods: {
    toggle(e) {
      this.show = !this.show
      if (this.extraClass) {
        domUtil.addClass(this.$refs.popover, this.extraClass)
      }
      setTimeout(() => {
        const popover = this.$refs.popover
        const trigger = this.$refs.trigger.children[0]
        switch (this.direction) {
          case 'top':
            this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
            this.position.top = trigger.offsetTop - popover.offsetHeight
            break
          case 'left':
            this.position.left = trigger.offsetLeft - popover.offsetWidth
            this.position.top = trigger.offsetTop - popover.offsetHeight / 2 + trigger.offsetHeight / 2
            break
          case 'bottom':
            this.position.left = trigger.offsetLeft - popover.offsetWidth / 2 + trigger.offsetWidth / 2
            this.position.top = trigger.offsetTop + popover.offsetHeight
            break
          case 'right':
            this.position.left = trigger.offsetLeft + trigger.offsetWidth
            this.position.top = trigger.offsetTop - popover.offsetHeight / 2 + trigger.offsetWidth / 2
        }

        if (this.extraTop) {
          this.position.top += this.extraTop
        }
        if (this.extraLeft) {
          this.position.top += this.extraLeft
        }
        
        if (this.exactTop !== undefined) {
          this.position.top = this.exactTop
        }
        if (this.exactLeft !== undefined) {
          this.position.left = this.exactLeft
        }

        popover.style.top = `${this.position.top}px`
        popover.style.left = `${this.position.left}px`
      }, 0)
    },
    hidePopoverIfNeeded() {
      if (this.show) {
        this.toggle()
      }
    }
  }
}
</script>

<template>
<span class="popover-container">
  <span @click="toggle()" ref="trigger">
    <slot name="trigger"></slot>
  </span>
  <div class="popover" v-show="show" ref="popover">
    <slot name="popover"></slot>
  </div>
</span>
</template>

<style>
.popover-container {
  position: relative;
}

.popover {
  position: absolute;
  padding: 15px;
  vertical-align: middle;
  background: #fff;
  z-index: 2;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
       -o-border-radius: 8px;
      -ms-border-radius: 8px;
  border-radius: 8px;
  border: 1px solid #c0c0c0;
  -webkit-box-shadow: 0 0 5px #c0c0c0;
     -moz-box-shadow: 0 0 5px #c0c0c0;
       -o-box-shadow: 0 0 5px #c0c0c0;
      -ms-box-shadow: 0 0 5px #c0c0c0;
          box-shadow: 0 0 5px #c0c0c0;
  text-align: left;
}

.popover-bottom-arrow:after {
  position: absolute;
  content: '';
  border-top: 18px solid #fff;
  border-right: 38px solid transparent;
  left: 50%;
  bottom: -18px;
  margin-left: -19px;
}

.popover-bottom-arrow:before {
  position: absolute;
  content: '';
  border-top: 20px solid #c0c0c0;
  border-right: 40px solid transparent;
  left: 50%;
  bottom: -20px;
  margin-left: -20px;
}
</style>